<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="card-header">
        <span class="title">维护验收标准</span>
        <div class="btn-wrap">
          <el-button
            size="middle"
            type="text"
            :loading="saveBtnLoading"
            @click="handleSave"
            >提交</el-button
          >
					<el-divider direction="vertical"></el-divider>
					<el-button
            size="middle"
            type="text"
            @click="$router.go(-1)"
            >返回</el-button
          >
        </div>
      </div>
      <div>
        <Umy-table
          :loading="tableLoading"
          :data-source="baseTableData"
          :columns="tableColumns"
          :tableHeight="500"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import UmyTable from '@/components/UmyTable';
import { isResponseSuccess } from '@/utils/bizUtils';
import { mapGetters } from 'vuex';

export default {
  components: {
    UmyTable,
  },
  data () {
    return {
      skuNo: '',
      tableLoading: false,
      saveBtnLoading: false,
      baseTableData: [], // 列表的数据源
      tableColumns: [],
      apiObj: {
        // 查询基本信息
        queryCheckStandardInfo: {
          url: '/sysback/product/collect/detail/queryAcceptance',
          type: 'post'
        },
        // 提交
        commitBasicInfo: {
          url: '/sysback/product/collect/detail/saveAcceptance',
          type: 'post'
        }
      }
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  created () {
    const { skuNo } = this.$route.query;
    this.skuNo = skuNo;
    this.initTabaleClonum();
    this.handleQueryTableData(skuNo);
  },
  methods: {
    initTabaleClonum () {
      this.tableColumns = [
        {
          title: '品类',
          key: 'categoryName'
        },
        {
          title: 'SKU编码',
          key: 'skuNo',
          width: 90
        },
        {
          title: '商品名称',
          key: 'productName'
        },
        {
          title: '规格',
          key: 'specDetailStr'
        },
        {
          title: '品牌',
          key: 'brandName'
        },
        {
          title: '验收时间',
          key: 'checkTime',
          required: true,
          type: 'select',
          options: [
            {
              value: '入库前',
              label: '入库前'
            },
            {
              value: '入库后',
              label: '入库后'
            }
          ]
        },
        {
          title: '验收频率',
          key: 'checkFrequency',
          required: true,
          type: 'inputNumPrecision',
          precision: 0,
          minVal: 1,
          width: 150
        }
      ];
    },
    handleQueryTableData (skuNo) {
      // 开始请求列表
      this.tableLoading = true;
      ApiRequest(
        this.apiObj.queryCheckStandardInfo.url + '?skuNo=' + skuNo,
        this.apiObj.queryCheckStandardInfo.type,
        {}
      )
        .then((res) => {
          this.tableLoading = false;
          if (isResponseSuccess(res)) {
            let reData = res.retData.standardList;
            this.handleFormatTableData(reData);
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    handleFormatTableData (reData) {
      this.baseTableData = [];
      this.tableColumns = [];
      this.initTabaleClonum();
      reData.forEach((element, oneIndex) => {
        // 准备一行数据的普通列
        let curRow = {
          categoryName: element.categoryName,
          skuNo: element.skuNo,
          productName: element.productName,
          brandName: element.brandName,
          specDetailStr: element.specDetailStr,
          checkTime: element.checkTime,
          checkFrequency: element.checkFrequency,
          itemList: element.itemList
        };
        // 新建表头。并准备一行数据的动态列
        element.itemList.forEach((item, index) => {
          this.pushItem(oneIndex, curRow, item, index);
        });
        // 将行，添加到展示列表
        this.baseTableData.push(curRow);
      });
    },
    pushItem (oneIndex, curRow, innerEle, index) {
      // 将行内动态列的信息，平铺到行
      curRow['checkCount' + index] = innerEle.checkCount;
      curRow['standardValue' + index] = innerEle.standardValue;
      curRow['upDiffValue' + index] = innerEle.upDiffValue;
      curRow['downDiffValue' + index] = innerEle.downDiffValue;
      curRow['checkMethod' + index] = innerEle.checkMethod;
      curRow['checkItemType' + index] = innerEle.checkItemType; // 1数字5个列可填，2文本3个列可填

      // 表头，遍历第1行的动态列时，才追加到表头
      if (oneIndex === 0) {
        if (innerEle.checkItemType !== '2') {
          this.tableColumns.push({
            title: innerEle.checkItemName,
            required: innerEle.isNeed === '1',
            key: innerEle.checkItemUuid,
            width: 150,
            align: 'center',
            children: [
              {
                title: '验收次数',
                align: 'center',
                key: 'checkCount' + index,
                type: 'inputNumPrecision',
                minVal: 1,
                maxVal: 5,
                width: 160
              },
              {
                title: '标准值',
                align: 'center',
                key: 'standardValue' + index,
                type: 'input',
                width: 150
              },
              {
                title: '上差值',
                align: 'center',
                key: 'upDiffValue' + index,
                type: 'inputNum',
                width: 160
              },
              {
                title: '下差值',
                align: 'center',
                key: 'downDiffValue' + index,
                type: 'inputNum',
                width: 160
              },
              {
                title: '验收方法',
                align: 'center',
                key: 'checkMethod' + index,
                type: 'input',
                width: 150
              }
            ]
          });
        } else {
          this.tableColumns.push({
            title: innerEle.checkItemName,
            required: innerEle.isNeed === '1',
            key: innerEle.checkItemUuid,
            width: 150,
            align: 'center',
            children: [
              {
                title: '验收次数',
                align: 'center',
                key: 'checkCount' + index,
                type: 'inputNumPrecision',
                minVal: 1,
                maxVal: 5,
                width: 160
              },
              {
                title: '标准值',
                align: 'center',
                key: 'standardValue' + index,
                type: 'input',
                width: 150
              },
              {
                title: '验收方法',
                align: 'center',
                key: 'checkMethod' + index,
                type: 'input',
                width: 150
              }
            ]
          });
        }
      }
    },
    // 格式化提交数据
    formatSubmitData () {
      let submitList = [];
      this.baseTableData.forEach((element) => {
        element.itemList.forEach((item, innerI) => {
          item.checkCount = element['checkCount' + innerI];
          item.standardValue = element['standardValue' + innerI];
          item.upDiffValue = element['upDiffValue' + innerI];
          item.downDiffValue = element['downDiffValue' + innerI];
          item.checkMethod = element['checkMethod' + innerI];
        });
        submitList.push({
          brandName: element.brandName,
          categoryName: element.categoryName,
          checkFrequency: element.checkFrequency,
          checkTime: element.checkTime,
          productName: element.productName,
          specDetailStr: element.specDetailStr,
          skuNo: element.skuNo,
          spuNo: element.spuNo,
          itemList: element.itemList
        });
      });
      return submitList;
    },
    // 保存
    handleSave () {
      this.saveBtnLoading = true;
      ApiRequest(
        this.apiObj.commitBasicInfo.url,
        this.apiObj.commitBasicInfo.type,
        { skuNo: this.skuNo, standardList: this.formatSubmitData() }
      )
        .then((res) => {
          if (isResponseSuccess(res)) {
            this.$confirm('提交成功，点击确认关闭当前页面', '提示', {
              type: 'warning',
            }).then(() => {
              window.close();
            }).catch(() => {});
          }
          this.saveBtnLoading = false;
        })
        .catch(() => {
          this.saveBtnLoading = false;
        });
    }
  }
};
</script>
<style lang="less" scoped>
.btn-wrap {
  float: right;
  .import-file {
    display: inline;
  }
}
.card-header {
  .title {
    font-size: 16px;
  }
}
</style>
